<!-- 影像号维护 -->
<template>
  <div class="image-content">
    <div class="image-main">
      <div class="title">hislink参数设置</div>
      <el-table
        ref="table"
        v-loading="loading"
        size="medium"
        :data="tableData"
        style="width: 100%"
        border
        class="ky-table"
      >
        <el-table-column type="selection" width="40" label="选择"></el-table-column>
        <el-table-column align="left" prop="type" label="连接类型"></el-table-column>
        <el-table-column align="left" prop="serveIP" label="服务器IP"> </el-table-column>
        <el-table-column align="left" prop="serveName" label="服务名称"></el-table-column>
        <el-table-column align="left" prop="userName" label="用户名称"></el-table-column>
        <el-table-column align="left" prop="status" label="连接状态"></el-table-column>
        <el-table-column align="left" label="操作" v-if="$store.state.app.permission" width="180">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="openEditor(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="right-panel">
      <div class="panel-head">
        <div class="title">{{currentStatus === pageStatus.add ? '添加':'编辑'}}</div>
        <div class="blue-color" @click="addClick" v-show="currentStatus === pageStatus.edit"><i class="el-icon-plus icon"></i>新增</div>
      </div>
      <el-form inline class="rule-form" ref="form" :model="ruleForm" :rules="rules">
        <el-form-item label="连接类型:" prop="type" class="small-item">
          <el-select size="small" class="param-type_input" v-model="ruleForm.type" placeholder="请选择" clearable>
            <el-option
              v-for="(item,index) in typeOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="连接状态:" prop="status" class="small-item">
          <el-select size="small" class="param-type_input" v-model="ruleForm.status" placeholder="请选择" clearable>
            <el-option
              v-for="(item,index) in statusOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务器IP:" prop="serveIP" class="large-item">
          <el-input size="small" v-model="ruleForm.serveIP" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="服务名称:" prop="serveName" class="large-item">
          <el-input size="small" v-model="ruleForm.serveName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="用户名称:" prop="userName" class="small-item">
          <el-input size="small" v-model="ruleForm.userName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="用户密码:" prop="password" class="small-item">
          <el-input size="small" v-model="ruleForm.password" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="remark" class="large-item">
          <el-input size="small" type="textarea" :rows="8" v-model="ruleForm.remark" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item prop="encryption" class="large-item">
          <el-checkbox v-model="ruleForm.encryption">自动加密</el-checkbox>
        </el-form-item>
        <el-form-item class="buttons">
          <el-button class="m-l-1" type="primary" size="small" @click="handleConfirm">保存</el-button>
          <el-button v-if="currentStatus === pageStatus.add" class="m-l-1" size="small" @click="handleCancle">取消</el-button>
          <el-button v-else class="m-l-1" size="small" type="danger" plain @click="handleDelete(ruleForm.id)">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { PageStatus } from '@/utils/constant'
export default {
  name: '',
  mixins: [],
  components: {},
  data() {
    return {
      pageStatus: PageStatus,
      currentStatus: PageStatus.add,
      loading: false,
      tableData: [
        {
          type: 'HIS',
          serveIP: '192.168.92.102.2',
          serveName: 'ptfp',
          userName: 'qcfw',
          status: '开启'
        },
        {
          type: '体检',
          serveIP: '192.168.92.102.2',
          serveName: 'zonekingnet',
          userName: 'tc',
          status: '开启'
        }
      ],
      multipleSelection: [],
      typeOptions: [],
      statusOptions: [],
      ruleForm: {
        hospitalCode: this.$store.state.user.hospitalCode,
        type: '',
        status: '',
        serveIP: '',
        serveName: '',
        userName: '',
        password: '',
        remark: '',
        encryption: ''
      },
      rules: {
        type: { required: true, message: '请选择连接类型', trigger: ['blur', 'change'] },
        status: { required: true, message: '请选择连接状态', trigger: 'blur' },
        serveIP: { required: true, message: '请填写服务器IP', trigger: ['blur', 'change'] },
        serveName: { required: true, message: '请填写服务器名称', trigger: 'blur' },
        userName: { required: true, message: '请填写用户名称', trigger: 'blur' },
        password: { required: true, message: '请填写用户密码', trigger: 'blur' }
      }
    }
  },
  watch: {},
  computed: {},
  created() {

  },
  mounted() {
    this.getTypeOptions()
    this.getStatusOptions()
  },
  methods: {
    handleConfirm() {
      this.$refs.form.validate((valid) => {

      })
    },
    handleCancle() {
      this.handleReset()
    },
    handleReset() {
      this.$refs.form.resetFields()
    },
    getTypeOptions() {
      /* 连接类型列表 */

    },
    getStatusOptions() {
      /* 连接状态列表 */

    },
    handleChange(val) {
      switch (val) {
        case 'dep':
          this.getScheduledModalityOptions()
          this.ruleForm.modality = ''
          break
        default:
          break
      }
    },
    openEditor(row) {
      /* 编辑 */
      this.currentStatus = this.pageStatus.edit
      this.ruleForm = Object.assign(this.ruleForm, row)
      this.getScheduledModalityOptions()
    },
    handleDelete() {
      /* 删除 */
    },
    addClick() {
      this.currentStatus = this.pageStatus.add
      this.handleReset()
      this.getScheduledModalityOptions()
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.image-content{
    display: flex;
    .title{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        margin-bottom: 15px;
    }
    .image-main{
        width:calc(100% - 344px);
        padding:20px
    }
    .right-panel{
            width:345px;
            padding: 20px;
            border-left: 1px solid #e4e7ed;
            .panel-head{
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
            .buttons{
                margin-bottom: 0px;
                .el-button{
                    width: 138px;
                }
            }
        }
        .blue-color{
            color:#1890FF;
            cursor: pointer;
        }
        .icon{
            margin-right:4px;
        }
        .el-form-item{
            margin-bottom: 5px;
        }
        .small-item{
            width: 140px;
        }
        .large-item{
            width: 294px;
            /deep/ .el-form-item__content{
                width:100%
            }
        }
}
</style>
